<template>
  <div class="article-page">
    <router-link to="/user/page"><button class="fa">返回</button></router-link>
     
    <div v-if="article">
      <h1>{{ article.title }}</h1>
      <p>{{ article.content }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useArticlesStore } from '@/stores/articles';


const route = useRoute();
const articleId = route.params.id; 
const articles = useArticlesStore();
interface Article {
  id: number;
  title: string;
  content: string;
  userid: number;
  username: string;
  tags: string[];
}
const article = ref<Article>(); 


async function getArticles() {
    const response = await articles.getArticle();  
    const foundArticle = response.data.data.find((item: Article) => item.id === Number(articleId));
    article.value = foundArticle || null; 
}
onMounted(() => {
  getArticles();
});
</script>

<style scoped>
.article-page {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}
.fa{
  position: fixed;
  top:80px;
  left: 30px;

  border: none;
  background-color: #fff;
  color:#1677ff;
  &:hover{
      color: #ccc;
    }
}
h1 {
  font-size: 2rem;
  margin-bottom: 20px;
}

p {
  font-size: 1.2rem;
  line-height: 1.6;
}
</style>
